<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-09-13 21:16:35
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-11-10 23:06:02
-->
<template>
  <a-select
    v-if="flag"
    :options="options"
    v-bind="$props"
    v-model:value="flagValues"
    @change="onValueChanged"
    mode="multiple"
  >
  </a-select>
  <a-select
    v-else
    :options="options"
    :value="value"
    @change="onValueChanged"
    v-bind="$props"
  >
  </a-select>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import { enumMarge, enumSplit, getEnumOptions } from "@/plugins/enums";

const emits = defineEmits(["update:value", "change"]);

const props = defineProps({
  placeholder: { type: String, default: "请选择" },
  value: {
    type: [Number],
  },
  name: { type: String, required: true },
  flag: { type: Boolean, default: false },
});
const flagValues = ref<Array<number>>([]);

onMounted(() => {
  if (props.flag) {
    flagValues.value = enumSplit(props.name, props.value);
  }
});

const options = computed(() => {
  return getEnumOptions(props.name);
});

const onValueChanged = (value: number | Array<number>) => {
  if (props.flag && Array.isArray(value)) {
    let val = enumMarge(props.name, value);
    emits("update:value", val);
    emits("change", val);
  } else {
    emits("update:value", value);
    emits("change", value);
  }
};
</script>

<style lang="less" scoped></style>
